<template>
  <div class="demo">
    <div class="demo-title">基本用法</div>
    <div class="demo-content">
      <Mentions v-model:value="value" autofocus @select="onSelect">
        <Mentions.Option value="afc163">afc163</Mentions.Option>
        <Mentions.Option value="zombieJ">zombieJ</Mentions.Option>
        <Mentions.Option value="yesmeck">yesmeck</Mentions.Option>
      </Mentions>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import Mentions from '@sscd/mentions';
  const value = ref<string>('@afc163');
  watch(
    () => value,
    () => console.log('value', value)
  );
  const onSelect = (option: { value: string }) => console.log('select', option);
</script>

<style lang="less" scoped></style>
